import React, { memo, useEffect, useState } from 'react'
import { useRoutes } from 'react-router-dom'
import router from './router/router'
import MyTarbar from './components/MyTarbar'
import './app.css'
import MyNavbar from './components/MyNavbar'
import shopContext from './context/shopContext'
const App = memo(() => {
  // 总数据 
  const [list, setList] = useState([
    {
      id: 0,
      title: '内容一',
      isDone: true
    },
    {
      id: 1,
      title: '内容二',
      isDone: false
    },
    {
      id: 2,
      title: '内容三',
      isDone: false
    }
  ])

  useEffect(() => {
    setTwolist(list)
  }, [list])

  // 用于展示页面的数据
  const [TwoList, setTwolist] = useState([])
  // 回收站内存储的数据
  const [delArr, setdelArr] = useState([])
  // 封装改变复选框状态的函数
  const getOne = (id) => {
    list.map(item => {
      if (item.id === id) {
        item.isDone = !item.isDone
      }
      return item
    })
  
    setList([...list])
  }
  // 封装添加一条数据的函数
  const addOne = (v) => {
    let obj = {
      id: TwoList.length + 1,
      title: v,
      isDone: false
    }
   
    setList([obj, ...list])
  }
  // 封装删除一条数据的函数
  const delOne = (id) => {
    let index = list.findIndex(item => item.id === id)
    delArr.push(list[index])
    setdelArr([...delArr])
    list.splice(index, 1)
    setTwolist([...list])
  }

  // 封装筛选数据的函数
  const Screen = (id) => {
    if (id === 3) {
      setTwolist(delArr)
    } else if (id === 0) {
      let newArr = list.filter(item => item)
      setTwolist(newArr)
    } else if (id === 1) {
      let newArr = list.filter(item => item.isDone)
      setTwolist(newArr)
    } else if (id === 2) {
      let newArr = list.filter(item => !item.isDone)
      setTwolist(newArr)
    }
  }
  return (
    <shopContext.Provider value={{ list: TwoList, getOne, addOne, delOne,  Screen, delArr: delArr }}>
      <div className='app'>
        <div className='top'>
          <MyNavbar></MyNavbar>
        </div>
        <div className='body'>
          {useRoutes(router)}
        </div>
        <div className='bottom'>
          <MyTarbar></MyTarbar>
        </div>
      </div>
    </shopContext.Provider>

  )
})

export default App
